<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="商品名称">
				<el-input v-model="queryParams.name" clearable></el-input>
			</el-form-item>
			<el-form-item label="商品状态">
				<el-select v-model="queryParams.status" clearable>
					<el-option label="已下架" value="0"></el-option>
					<el-option label="已上架" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage"><el-icon> <ele-Search /> </el-icon>搜索</el-button>
				<el-button @click="restQuery"><el-icon> <ele-Refresh /> </el-icon>重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div>
				<el-button type="primary" v-auth="'mall:goodsspu:add'" @click="add"><el-icon> <ele-Plus />
					</el-icon>新增</el-button>
			</div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch"
				@refresh="initPage"></right-toolbar>
		</div>
		<!-- 列表 -->
		<el-table v-loading="loading" :data="tableData" border>
			<el-table-column prop="spu" label="商品信息" width="330">
				<template #default="scope">
					<el-row>
						<el-col :span="6">
							<el-image style="width: 60px; height: 60px" :src="scope.row.spuUrls[0]"
								:preview-src-list="scope.row.spuUrls" fit="cover" :preview-teleported="true"></el-image>
						</el-col>
						<el-col :span="18" style="float: left">
							<span class="overflow-line-clamp-2">{{ scope.row.name }}</span>
							<div class="overflow-line-clamp-1" style="font-size: 13px; color: #909399">{{
								scope.row.subTitle
							}}</div>
						</el-col>
					</el-row>
				</template>
			</el-table-column>
			<el-table-column prop="categoryName" label="商品类目" align="center" width="100" />
			<el-table-column prop="salesPrice" label="价格（元）" align="center">
				<template #default="scope">
					<div v-if="scope.row.lowPrice == scope.row.highPrice">
						销售价：
						<span style="color: red">{{ scope.row.lowPrice }}</span>
					</div>
					<div v-else>
						<div>
							最低价：
							<span style="color: red">{{ scope.row.lowPrice }}</span>
						</div>
						<div>
							最高价：
							<span style="color: red">{{ scope.row.highPrice }}</span>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="商品状态" align="center" width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.status == '0'" type="danger">已下架</el-tag>
					<el-tag v-if="scope.row.status == '1'" type="success">已上架</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="categoryName" label="规格" align="center" width="100">
				<template #default="scope">
					<el-tag v-if="scope.row.enableSpecs == '0'" type="danger">单规格</el-tag>
					<el-tag v-if="scope.row.enableSpecs == '1'" type="success">多规格</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="salesVolume" label="销量" align="center" />
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column label="操作" width="200" align="center" fixed="right">
				<template #default="scope">
					<el-button link type="primary" v-auth="'mall:goodsspu:edit'" @click="edit(scope.row)"><el-icon>
							<ele-Edit /> </el-icon>修改</el-button>
					<el-button link type="danger" v-auth="'mall:goodsspu:del'" @click="del(scope.row.id)"><el-icon>
							<ele-Delete /> </el-icon>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<pagination v-model:total="page.total" v-model:currentPage="page.currentPage" v-model:pageSize="page.pageSize"
			@changePage="initPage"></pagination>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed } from 'vue';
import { getPage, delObj } from '/@/api/mall/goodsspu';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
export default defineComponent({
	setup() {
		const data = reactive({
			queryParams: {
				name: '',
				status: '',
			},
			page: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				descs: 'create_time',
			},
			tableData: [],
		});
		const showSearch = ref(true);
		const $route = useRouter();
		const loading = ref(false);
		const { tableData, queryParams, page } = toRefs(data);

		const initPage = async () => {
			loading.value = true;
			let params = {
				current: page.value.currentPage,
				size: page.value.pageSize,
				descs: page.value.descs,
			};
			await getPage(Object.assign(params, queryParams.value))
				.then((response) => {
					tableData.value = response.data.data.records;
					page.value.total = response.data.data.total;
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 重置搜索表单
		 */
		const restQuery = () => {
			queryParams.value = { name: '', status: '' };
		};
		/**
		 * 新增按钮
		 */
		const add = () => {
			$route.push({ path: '/goods/spu' });
		};
		/**
		 * 修改按钮
		 */
		const edit = (row: any) => {
			$route.push({ path: '/goods/spu', query: { id: row.id } });
		};
		/**
		 * 删除按钮
		 */
		const del = (id: string) => {
			ElMessageBox.confirm('此操作将删除该商品，是否继续?', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				delObj(id)
					.then((response) => {
						ElMessage.success('删除成功');

						initPage();
					})
					.catch(() => { });
			});
		};
		initPage();
		return {
			showSearch,
			loading,
			tableData,
			queryParams,
			page,
			initPage,
			restQuery,
			add,
			edit,
			del,
		};
	},
});
</script>
